<template>
    <div class="time-select">
        <div class="select-head">
            <p class="head-item" v-for="(item, index) in dateOptions" :key="index" :class="{ actived: item.value === selectDate.value }" @click="selectHeadItem(item)">
                <span>{{ item.label }}</span>
                <span>{{ item.value }}</span>
            </p>
        </div>
        <div class="select-main">
            <p class="main-item" :class="isSelected(item) ? 'actived' : ''" v-for="(item, index) in timeOptions" :key="index" @click="seletMainItem(item, index)">{{ item.startHour }} ~ {{ item.endHour }}</p>
        </div>
    </div>
</template>

<script>
import * as dayjs from 'dayjs'
export default {
    name: 'TimeSelect',
    computed: {
        isSelected() {
            return function (data) {
                return JSON.stringify(this.seletTime) !== '{}' && 
                this.seletTime.startDateTime === data.startDateTime && this.seletTime.endDateTime === data.endDateTime
            }
        }
    },
    props: {
        dateTime: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 选中的日期
            selectDate: {},
            // 选中的时间段
            seletTime: {},
            // 日期选项
            dateOptions: [],
            // 时间选项
            timeOptions: []
        };
    },
    methods: {
        // 构造日期时间
        generateDate(day = 0, pattern) {
            let num = 1000 * 60 * 60 * 24 * day;
            let newDate = new Date(Date.now() + num);
            return dayjs(newDate).format(pattern)
        },
        // 初始化日期选项
        initDateOptions() {
            let dayArr = [{ day: 0, label: '今天' }, { day: 1, label: '明天' }, { day: 2, label: '后天' }]
            this.dateOptions = dayArr.map(item => {
                return {
                    label: item.label,
                    value: this.generateDate(item.day, 'YYYY-MM-DD')
                }
            })
            this.selectHeadItem(this.dateOptions[0])
        },
        // 构造时间区间 startTime 08:00:00, 20:00:00
        generateTimes(space, start, end) {
            let spaceNum = (end - start) / space
            let timeArr = new Array(spaceNum).fill('')
            let resultArr = timeArr.map((item, index) => {
                let startDTime = start + index * space
                let endDTime = start + (index + 1) * space
                let startDateTime = dayjs(startDTime).format('YYYY-MM-DD HH:mm:ss')
                let endDateTime = dayjs(endDTime).format('YYYY-MM-DD HH:mm:ss')
                let startHour = dayjs(startDTime).format('HH:mm')
                let endHour = dayjs(endDTime).format('HH:mm')
                return {
                    startDateTime: startDateTime,
                    endDateTime: endDateTime,
                    startHour: startHour,
                    endHour: endHour,
                    disabled: new Date().getTime() > startDTime
                }
            })
            return resultArr;
        },
        // 初始化时间选项
        initTimeOptions(date) {
            let startDateTime = date + ' ' + '08:00:00'
            let endDateTime = date + ' ' + '20:00:00'
            let start = new Date(startDateTime).getTime()
            let end = new Date(endDateTime).getTime()
            let resultArr = this.generateTimes(1000 * 60 * 60, start, end)
            this.timeOptions = resultArr.filter(item => !item.disabled)
        },
        // 日期 - 点击选择结果项
        selectHeadItem(data) {
            this.selectDate = data
            this.seletTime = {}
            this.initTimeOptions(data.value)
        },
        // 日期 - 点击选择时间段
        seletMainItem(data) {
            this.seletTime = data
            this.$emit('updateResult', {
                value: this.selectDate.label + ' ' + data.startHour + ' ~ ' + data.endHour,
                ...this.seletTime
           })
        }
    },
    mounted() {
        this.initDateOptions()
    }
};
</script>

<style lang="scss" scoped>
.time-select {
    .select-head {
        height: 60px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 2px solid #f7f7f7;
        .head-item {
            font-size: 13px;
            line-height: 16px;
            border: 1px solid #dcdfe6;
            padding: 5px 16px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
            transition: all 0.3s ease;
            &.actived {
                color: $--color-danger;
                border: 1px solid $--color-danger;
            }
        }
    }
    .select-main {
        padding-top: 10px;
        min-height: 100px;
        max-height: 200px;
        overflow: hidden scroll;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .main-item {
            flex: 0 0 32%;
            padding: 6px 6px;
            margin: 0 2px 10px 2px;
            border-radius: 2px;
            overflow: hidden;
            cursor: pointer;
            text-align: center;
            &:hover {
                color: $--color-danger;
                background-color: #fce9eb;
            }
            &.actived {
                color: $--color-danger;
                background-color: #fce9eb;
            }
        }
    }
}
</style>